<template>
  <div class="c-pb84 copyNot">
    <div v-if="testRes!=null&&testRes.logType==2" class="newTest c-fs24 c-pv10">检测到最新版本，再次练习可获取</div>
    <div v-if="testRes!=null" class="c-ph24 c-p">
      <div>
        <div class="c-pt30" v-if="testRes">
          <div class="c-flex-row c-aligni-center">
            <img class="c-ww70 c-brp50 c-hh70" :src="$addXossFilter(testRes.headimgurl, require('@/assets/defult_head.png'))" alt="">
            <div class="c-fs28 c-fc-xblack c-fw-b c-ml16 c-text-ellipsis1 c-ww320">{{testRes.nickname}}</div>
          </div>
          <div class="c-mt32 c-ww280 c-mlr-auto c-hh280 c-p c-mb30" v-if="testRes.examType!=5&&testRes.examType!=7&&testRes.examType!=8">
            <x-circle :percent="testRes.accuracy * 100" :strokeWidth="5" :stroke-color="['#9AAAFF', '#6C83FF']" :trailWidth="5" :trailColor="'#d3daff'" anticlockwise>
              <div class="" v-if="testRes.isCheck != -1">
                <span class="c-fs100" :class="testRes.isCheck == -1?'c-ph24':''">
                  {{testRes.isCheck == -1?'--':Number(testRes.accuracy*100).toFixed(0)}}
                </span>
                <span class="c-fs26 score-text">%</span>
              </div>
            </x-circle>
          </div>
          <div v-else>
            <div class="c-pt50 c-pb30"><img class="c-ww220 c-m-0auto" :src="require('../../../assets/i/wap/exam/easyResult.png')" alt=""></div>
            <div class="c-pb60 c-fs24 c-fc-gray c-textAlign-c" v-if="testRes.questionNum==0">全部回答完毕</br>已为您自动移除作答正确的题目</div>
          </div>
          <div class="c-ph24 c-fs24 c-fc-xblack c-textAlign-c c-mb58" v-if="testRes.examType!=5&&testRes.examType!=7&&testRes.examType!=8">您已超越{{Number(testRes.overstep*100).toFixed(0)}}%的学员！</div>
          <div class=" c-flex-row c-justify-center c-aligni-center c-textAlign-c" v-if="testRes.totalNum">
            <div class="c-flex-1">
              <div class="c-fs30 c-fc-mblue">{{testRes.totalNum}}</div>
              <div class="c-fs20 c-fc-gray">总题数</div>
            </div>
            <div class="c-flex-1">
              <div class="c-fs30 c-fc-mblue">{{testRes.rightNum}}</div>
              <div class="c-fs20 c-fc-gray">正确题数</div>
            </div>
            <div class="c-flex-1">
              <div class="c-fs30 c-fc-mblue">{{testRes.errorNum}}</div>
              <div class="c-fs20 c-fc-gray">错误题数</div>
            </div>
            <div class="c-flex-1" v-if="(testRes.examType==5||testRes.examType==7||testRes.examType==8)">
              <div class="c-fs30 c-fc-mblue">{{testRes.isCheck == -1?'--':Number(testRes.accuracy*100).toFixed(0)}}%</div>
              <div class="c-fs20 c-fc-gray">正确率</div>
            </div>
            <div class="c-flex-1">
              <div class="c-fs26 c-fc-mblue">{{testRes.ansTime}}</div>
              <div class="c-fs20 c-fc-gray">耗时</div>
            </div>
          </div>
        </div>
        <div class="c-aligni-center c-fs28 c-mt80 c-ww500 c-m-0auto" v-if="testRes != null">
          <div v-if="!((testRes.examType==5||testRes.examType==7||testRes.examType==8)&&testRes.questionNum==0)" @click="goTest(1)" class="c-hh76 c-fc-white c-flex-row c-br36 c-justify-center c-aligni-center bg-linearColor">
            <div>再次测试</div>
          </div>
          <div @click="clickGoAncy" class="c-mt30 c-fc-mblue c-bd1-ssmblue c-br36 c-hh76 c-flex-row c-justify-center c-aligni-center">
            <div>查看解析</div>
          </div>
          <div class="c-fc-mblue c-fs24 c-mt28">
            <div class="c-flex-row c-justify-center c-aligni-center">
              <div @click="clickGoList">{{(testRes.examType==5||testRes.examType==7||testRes.examType==8)&&isFromPractice!=1?'返回错题':'返回练习'}}</div>
              <div class="c-mh10" v-if="(testRes.examType!=5&&testRes.examType!=7&&testRes.examType!=8)||isFromPractice==1">|</div>
              <div v-if="(testRes.examType!=5&&testRes.examType!=7&&testRes.examType!=8)||isFromPractice==1" @click="takePartIn">查看错题</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-loading :showLoading="isShowLoading"></my-loading>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import { XCircle } from 'ckjrweb-mp-ui/src/components/index';
import myLoading from "@/plugin/loading/loading.vue";
export default {
  name: "ExaminationResult",
  components: {
    myLoading,
    XCircle
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      testRes: null,
      paperMainId: -1,
      topicId: '',
      isRelevance: '',
      examinationInfo: null,
      isShowLoading: false,
      ttId: "",
      tpId: "",
      tlId: "",
      progress: "",
      type: '',
      libraryId: '',
      isFromPractice:''
    };
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("测试结果");// eslint-disable-line
    this.type = this.$route.query.type;
    this.libraryId = this.$route.query.libraryId;
    this.examMainId = this.$route.query.examMainId;
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || ""; //环节id
    this.tlId = this.$route.query.tlId || "";
    this.isFromPractice = this.$route.query.isFromPractice || '',
    this.progress = this.$route.query.progress || "";
    this.setProgress();
    this.testRes = null;
    let $this = this;
    //获取测试结果数据
    utilJs.getMethod(global.apiurl + 'itemBank/resultPageInfo?examMainId=' + this.examMainId, function (res) {
      $this.testRes = res;
      // examType类型：1=顺序出题；2=随机出题；3=章节出题；4=题型练习; 5=错题练习(章节); 6=收藏练习;7=错题练习（全部）；8=错题练习（题型）
      $this.wechatShare();
    });
  },
  deactivated() {
    this.setProgress();
  },
  mounted() { },
  computed: {},
  watch: {},
  methods: {
    clickGoAncy() {
      this.$routerGo(this, "push", {
        path: "/homePage/itemBank/itemAnswerAnalyze",
        query: {examMainId: this.examMainId}
      });
    },
    takePartIn() {
      // let $this = this;
      // if (Number($this.testRes.errorNum) == 0) {
      //   this.$showCjToast({
      //     text: "暂无错题需要订正",
      //     type: "warn",
      //     time: 1500
      //   });
      //   return
      // }
      this.$routerGo(this, "push", {
        path: "/member/myWrongTopic/practiceWrong/practiceWrongList",
        query: {
          rId:this.testRes.testRid,
          practiceId: this.testRes.libraryId
        }
      });
    },
    // 记录播放进度
    setProgress: function () {
      let data = {
        ttId: this.ttId, //营期ID
        tpId: this.tpId, //环节ID
        tlId: this.tlId, //课时ID
        ratio: this.progress, //完成进度0-100
      }
      utilJs.postMethod(`${global.apiurl}k12/trainings/progress`, data, res => {
      });
    },
    clickGoList() {
      if ((this.testRes.examType == 5 || this.testRes.examType == 7 || this.testRes.examType == 8) && this.isFromPractice != 1) {
        this.$routerGo(this, "push", {
            path: "/member/myWrongTopic/practiceWrong/practiceWrongList",
            query: {
              rId:this.testRes.testRid,
              practiceId: this.testRes.libraryId
            }
          });
      } else {
        let querys = {
          practiceId:this.testRes.libraryId
        }
        this.$routerGo(this, "push", {
          path: '/homePage/itemBank/practiceModes',
          query: querys
        })
      }
    },
    goTest() {
       //加入考试
      let $this = this
      let data = {
        libraryId: $this.testRes.libraryId, //详情带过来的练习ID
        type: $this.testRes.type, //模式
      }
      if ($this.testRes.type == 8 || $this.testRes.type == 4 || $this.testRes.type == 6) {
        data.questionType = $this.testRes.questionType
      }
      if ($this.testRes.type == 3 || $this.testRes.type == 5) {
        data.rId = $this.testRes.rId
      }
      if ($this.testRes.isReturnDetail == 1) {
        let querys = {
          practiceId:$this.testRes.libraryId
        }
        $this.$routerGo($this, "push", {
          path: '/homePage/itemBank/practiceModes',
          query: querys
        })
        return
      }
      utilJs.postMethod(`${global.apiurl}itemBank/takePartIn`, data, function (
        res
      ) {
        let querys = {
          libraryId: $this.testRes.libraryId,
          type: $this.type,
          goOnNum: 1,
          isFromPractice:$this.$route.query.isFromPractice || '',
        }
        if ($this.type == 8 || $this.type == 4 || $this.type == 6) {
          querys.questionType = $this.testRes.questionType
        }
        if ($this.type == 6) {
          querys.isCollect = 1
        }
      if ($this.type == 3 || $this.type == 5) {
        querys.rId = $this.testRes.rId
      }
        $this.$routerGo($this, "replace", {
          path: '/homePage/itemBank/questionAnswer',
          query: querys
        })
      })
    },
    //分享
    wechatShare: function () {
      let title = this.testRes.libraryName;
      let shareImg = this.testRes.avatar || require('../../../assets/examination_defult.png');
      let shareDesc = this.testRes.libraryDesc;//"共包含"+this.testRes.hasPaper+"套考卷";
      let shareUrl = ''
      let $this = this
      shareUrl = `${window.location.href.split("#")[0]}#/homePage/itemBank/questionSaleDetail?libraryId=${$this.libraryId}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = this.testRes.libraryName;
      let shareImg = this.testRes.avatar || require('../../../assets/examination_defult.png');
      let shareUrl = ''
      let $this = this
      shareUrl = `${window.location.href.split("#")[0]}#/homePage/itemBank/questionSaleDetail?libraryId=${$this.libraryId}&refereeId=${localStorage.getItem("userId")}`;
      var shareDesc = this.testRes.libraryDesc;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.c-pb84 {
  padding-bottom: 2.1rem;
}
.pass1 {
  width: 14rem;
  height: 9.3rem;
  padding-top: 6.8rem;
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/exam/pass1.png") no-repeat left top;
  background-size: 100% 100%;
}
.pass2 {
  width: 14rem;
  height: 12.6rem;
  padding-top: 6rem;
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/exam/pass2.png") no-repeat left top;
  background-size: 100% 100%;
}
.pass4 {
  width: 14rem;
  height: 14rem;
  padding-top: 6rem;
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/exam/pass4.png") no-repeat left top;
  background-size: 100% 100%;
}
.pass3 {
  width: 14rem;
  height: 11.3rem;
  padding-top: 6.3rem;
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/exam/pass3.png") no-repeat left top;
  background-size: 100% 100%;
}
.fail {
  width: 14rem;
  height: 8.5rem;
  padding-top: 6.6rem;
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/exam/fail.png") no-repeat left top;
  background-size: 100% 100%;
}
.score-text {
  margin-left: -0.75rem;
}
.bg-linearColor{
  background: linear-gradient(90deg,#9aaaff, #6c83ff);
}
.bg-linearColor{
  background: linear-gradient(90deg,#9aaaff, #6c83ff);
}
.newTest{
  background: #FEF2EB;
  color: #FF300C;
  text-align: center;

}
</style>


